require(['./config'], function() {
	require(['jquery', 'template', 'loadHF', 'zoom', 'fly'], function($, template) {
		class initdetail {
			constructor() {
				this.cart = []
				this.init_detail()
				this.addListener()
			}
			init_detail() {
				const _id = location.search.slice(4)
				// console.log(_id)
				const url = `https://www.xiongmaoyouxuan.com/api/detail?id=${_id}`
				$.getJSON(url, function(a) {
					const b = a.data.detail
					// console.log(b.id)
					const list = {
						prod: b
					}
					const html = template('detail-init', list)
					$(".midd").append(html)
					$("img.card-img").elevateZoom({
						gallery: 'gallery',
						cursor: 'pointer',
						galleryActiveClass: 'active',
						tint: true,
						tintOpacity: 0.5
					})
				})

			}
			addListener() {
				// console.log($(".jrgwc"))
				$(".midd").on('click', '.jrgwc', this.addtocar.bind(this))
			}
			addtocar(e) {
				// console.log("aa")
				this.cart = JSON.parse(localStorage.getItem('cart')) || []
				const parent = $(e.target).parents(".jianjj")
				// console.log(parent.find(".cart-price").text().slice(1))
				// console.log(parent.children(".card-img").attr("src"))
				const gwclist = {
					id: parent.data("id"),
					img: parent.find(".card-img").attr("src"),
					title: parent.find(".cart-title").text(),
					price: parent.find(".cart-price").text().slice(1),
					amount: 1
				}

				// console.log(this.cart)
				// 判断
				const has = this.cart.some(function(aa) {
					return aa.id == gwclist.id
				})
				// console.log(has)
				if (has) {
					this.cart = this.cart.map(function(bb) {
						if (bb.id == gwclist.id) {
							bb.amount += 1
						}
						return bb
					})
				} else {
					this.cart.push(gwclist)
				}
				// console.log(this.cart)
				localStorage.setItem("cart", JSON.stringify(this.cart))
				if (this.cart == 0) {
					$(".cartamount").text(0)
				} else {
					let s = 0
					this.cart.forEach(function(a) {
						s += a.amount
					})
					$(".cartamount").text(s)
				}
				
				this.flys(e)
			}
			flys(e) {
				console.log(e.pageY)
				console.log(e.pageX)
				const start = {
					top: e.screenY-90,
					left: e.screenX
				}
				// 待运动的元素
				const flyeimg = $(".card-img").attr("src")
				const flyer = $(`<img src="${flyeimg}" style="width: 40px;z-index: 100;">`)
				// 实现抛物线运动
				flyer.fly({
					start,
					end: {
						left: 1150,
						top: 60,
						width: 0,
						height: 0
					},
					onEnd() {
						this.destroy()
					}
				})
			}
		}
		new initdetail()
	})
})
